<template>
    <!--注意:model用于绑定数据对象  :rules为校验规则  ref可以理解为要参加校验的对象-->
    <el-form style="width: 45%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <!--此处的label为标签名，prop为对应的属性的校验规则-->
        <el-form-item label="图书名称" prop="name">
            <!--v-model是获取数据对象的属性名称-->
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
            <el-input v-model="ruleForm.author"></el-input>
        </el-form-item>
        <el-form-item label="出版社" prop="publish">
            <el-input v-model="ruleForm.publish"></el-input>
        </el-form-item>

        <el-form-item>
            <!--此处规定了提交按钮对应的点击事件是：submitForm-->
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
        export default {
            data() {
                return {
                    ruleForm: {
                        name: '',
                        author: '',
                        publish: '',
                    },
                    rules: {
                        name: [
                            /*required设置是否为必须项；message为提示信息；trigger为触发事件的时刻*/
                            { required: true, message: '请输入图书名称', trigger: 'blur' },
                            { min: 1, max: 25, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                        ],
                        author: [
                            { required: true, message: '请输入作者名', trigger: 'blur' }
                        ],
                        publish: [
                            { required: true, message: '请输入出版社名', trigger: 'blur' }
                        ],
                    }
                };
            },
            methods: {
                /*此处的submitForm事件的作用是：在校验审核通过且比较后端的数据相同时，弹出信息添加成功的提示*/
                submitForm(formName) {
                    const _this = this;
                    /*此处为submitForm的事件*/
                    this.$refs[formName].validate((valid) => {
                        if (valid) {    /*即全部规则成立时，提示此消息。*/

                            /*处理接收到后端对应网址的数据*/
                            axios.post('http://localhost:8181/book/save',this.ruleForm).then(function (resp) {
                                if(resp.data == "success"){
                                    /*消息提示框设置：完成信息添加成功的提示后，再跳转*/
                                    _this.$alert('《'+_this.ruleForm.name+'》添加成功！', '消息', {
                                        confirmButtonText: '确定',
                                        callback: action => {
                                            /*完成信息添加成功后的，页面跳转*/
                                            _this.$router.push('/bookManage');
                                        }
                                    });
                                }
                            })
                        } else {
                            return false;
                        }
                    });
                },
                resetForm(formName) {
                    this.$refs[formName].resetFields();
                }
            }
        }
    </script>

<style scoped>

</style>